<template>
    <div>
        <Card class="wrap" :bordered="false" :dis-hover="true">
            <slot></slot>
            <Table
                :height="tableHeight"
                border
                class="table"
                @on-selection-change="handleSelectionChange"
                ref="selection"
                :columns="columns"
                :data="list"
                :loading="loading"
            >
                <template slot-scope="{ row }" slot="name">
                    <strong>{{ row.name }}</strong>
                </template>
            </Table>
            <div class="page-wrap" v-if="!isPage">
                <div class="page-wrap-total">共 {{total}} 条</div>
                <div>
                    <Page placement="top" :total="total" :current="current" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer></Page>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
export default {
    name: 'GlobalTables',
    props: ['list', 'columns', 'loading', 'total', 'showTotal', 'current', 'isPage', 'height'],
    data() {
        return {
            switchTitle: ''
        };
    },
    // 操作-表格表头-表格数据-是否搜索-是否加载
    methods: {
        changePage(num) {
            this.$emit('changePage', 'page', num);
        },
        changePageSize(num) {
            this.$emit('changePage', 'pageSize', num);
        },
        handleSelectionChange(num) {
            this.$emit('handleAllSelect', num);
        }
    },
    computed: {
        tableHeight() {
            if (this.height) {
                return this.height;
            } else {
                return window.innerHeight - 240;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.wrap {
    padding-bottom: 10px;
}
.page-wrap {
    position: fixed;
    bottom: 25px;
    left: 230px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.page-wrap-total {
    border-radius: 3px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    margin: 0 20px;
    border: 1px solid #dcdee2;
    font-size: 12px;
}
.search-con {
    padding: 10px 0;
    .search {
        &-col {
            display: inline-block;
            width: 200px;
        }
        &-input {
            display: inline-block;
            width: 200px;
            margin-left: 2px;
        }
        &-btn {
            margin-left: 2px;
        }
    }
}
.list-btn {
    margin: 0 5px;
}
.delete-btn {
    background: #fc8675;
    border: none;
}
.edit-btn {
    background: #5ab1ef;
    border: none;
}
</style>


